<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue源码测试</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2">
  </script> -->
</head>

<body>
  <script src="dist/vue.js"></script>
  <div id="app">
    <div class="container">姓名{{name}}</div>
    <div>年龄: {{age}}</div>
    <div style="color: red; font-size: 20px;">{{ arr[1].arr[0] }}</div>
    <div>{{arr}}</div>
    <div>{{ full }}</div>
  </div>
  <script>
    // Vue.Mixin({
    //   created(){
    //     console.log('mixin')
    //   }
    // })
    // Vue.Mixin({
    //   created(){
    //     console.log('mixin')
    //   },
    //   mounted(){

    //   }
    // })
    const vue = new Vue({
      el: '#app',
      data() {
        return {
          name: 'vue',
          age: 20,
          arr: [123, { arr: [234, 1] }]
        }
      },
      created() {
        // console.log('created', this)
        this.$nextTick(() => {
          this.name = '李四';
        })
      },
      methods: {

      },
      watch: {
        name(val, old) {
        },
        arr: [
          function(old, val) {
            this.name = '王五';
          },
        ],
        age: {
          handler() {
          },
          immediate: true
        }
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      mounted() {
        setTimeout(() => {
          this.name = '张三';
          this.arr.push('last');
        }, 3000)
      },
      computed: {
        full(){
          return this.name + this.age
        }
      },
      props: {}
    })
    window.vm = vue;
    // vue渲染流程 => 数组初始化 => 对模板进行编译 => 变成render函数 => vnode => 真实dom
    // vue生命周期
    // 1，Vue.mixin混入
    // 2，设计模式 订阅-发布

    // 收集依赖， 实现自动更新
    // 创建watcher， 进行扩展
    // data、dep、watcher相关联
    // data和dep是一对一
    // dep和watcher是多对多
  </script>
</body>

</html>